<template>
  <golden-layout
    :router="false"
    ref="GLayoutRoot"
    :config="prefinedLayouts"
    style="width: 100%; height:100%"
  >
    <template #Content1="{ abc }">
      <div style="color: white">{{abc || 111}}</div>
    </template>
    <template #Content2>
      <div style="width: 100%; color: white; overflow: auto">
        11122233344455566677788899900011122233
      </div>
    </template>
    <template #Content3>
      <c3 />
    </template>
  </golden-layout>
</template>
<script setup>
import GoldenLayout from '@/goldenLayout'
const prefinedLayouts = {
  root: {
    type: 'column',
    content: [{
      type: 'component',
      title: 'Init',
      header: { show: 'top' },
      componentType: 'Content1',
      width: 50,
      componentState: { abc: 'Yhea' }
    }, {
      type: 'row',
      content: [{
        type: 'component',
        title: 'Title 1st',
        header: { show: 'top' },
        isClosable: false,
        componentType: 'Content1',
        width: 10,
        componentState: { abc: 123 }
      }, {
        type: 'component',
        title: "I'm wide",
        header: { show: 'top', popout: false },
        componentType: 'Content2'
      }]
    }]
  }
}
const GLayoutRoot = ref(null)
// const onClickInitLayoutMinRow = () => {
//   if (!GLayoutRoot.value) return
//   GLayoutRoot.value.loadGLLayout(prefinedLayouts.miniRow)
// }

// const onClickAddGlComponent1 = () => {
//   if (!GLayoutRoot.value) return
//   GLayoutRoot.value.addGlComponent('Content1', 'Title 1st')
// }

// const onClickAddGlComponent2 = () => {
//   if (!GLayoutRoot.value) return
//   GLayoutRoot.value.addGlComponent('Content2', "I'm wide")
// }

// const onClickAddGlComponent3 = () => {
//   if (!GLayoutRoot.value) return
//   GLayoutRoot.value.addGlComponent('Content3', "I'm high")
// }

// const onClickSaveLayout = () => {
//   if (!GLayoutRoot.value) return
//   const config = GLayoutRoot.value.getLayoutConfig()
//   localStorage.setItem('gl_config', JSON.stringify(config))
// }

// const onClickLoadLayout = () => {
//   const str = localStorage.getItem('gl_config')
//   if (!str) return
//   if (!GLayoutRoot.value) return
//   const config = JSON.parse(str)
//   GLayoutRoot.value.loadGLLayout(config)
// }
</script>
<style src="golden-layout/dist/css/goldenlayout-base.css"></style>
<style src="golden-layout/dist/css/themes/goldenlayout-light-theme.css"></style>
